<template>
 <button @click="goBack"><</button>
      <div class="top">
        <h2>账号密码登录</h2>
      </div>
      <van-form @submit="onSubmit">
        <van-cell-group inset>
          <van-field v-model="username" name="用户名" label="用户名" placeholder="用户名"
            :rules="[{ required: true, message: '请填写用户名' }]" />
          <van-field v-model="password" type="password" name="密码" label="密码" placeholder="密码"
            :rules="[{ required: true, message: '请填写密码' }]" />
        </van-cell-group>
        <div style="margin: 16px;">
          <van-button round block type="primary" native-type="submit">
            登录
          </van-button>
        </div>
      </van-form>
</template>

<script>
import { showFailToast, showSuccessToast } from 'vant';
import { loginRequest } from '../../api/userApi'
export default {
  data() {
    return {
      username: '',
      password: ''
    }
  },
  methods: {
    onSubmit() {
      console.log('点击了按钮');
      loginRequest(this.username, this.password)
        .then(res => {
          console.log(res.data);
          let { code, message } = res.data
          if (code == '200') {
            let { token, userid } = res.data.data;
            localStorage.setItem('mallFrontToken', token);
            localStorage.setItem('mallFrontUserid', userid);
            showSuccessToast(message)
            this.$router.push('/')
          } else {
            showFailToast(message)
          }
        })
    },
    goBack() {
      this.$router.go(-1)
    }
  }
}
</script>

<style>
.top {
  margin-bottom: 20px;
  text-align: center;
}
</style>